<template>
  <!-- 表单排序组件 -->
  <div class="sort" @click="handleClick">
    <i class="el-icon-caret-top" :style="{color:color1[type]}"></i>
    <i class="el-icon-caret-bottom" :style="{color:color2[type]}" style="margin-top: -4px;"></i>
  </div>
</template>
<script>
export default {
  name: "uiSort",
  props: {
    item: {
      type: Object,
      default: () => { return {} }
    },
  },
  
  data() {
    return {
      type: 0,//0:取消排序 ，1：升序  2：降序
      color1: {
        0: '#999',
        1: '#d8a764',
        2:'#999'
      },
      color2: {
        0: '#999',
        1: '#999',
        2:'#d8a764'
      }
    }
  },
  created() {
  },
  methods: {
    handleClick() {
      this.type++;
      if (this.type > 2) {
        this.type=0
      }
      this.$emit('handleSort',{key:this.item.key,value:this.type})
    },
  }
}
</script>
<style scoped lang="less">
.sort {
  cursor: pointer;
  margin-left: 4px;

  display: flex;
  flex-direction: column;
  
}
</style>